/* 
 *Propriété de la page
 */
html {
	width: 100%;
	min-height: 100%;
	background-image: linear-gradient( #E3EAEA 0%, #CCCCCC 500px);
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;	
}

body {
	width: 100%;
	min-height: 100%;
	padding: 0px;
	margin: 0px;
	
}
/* 
 *haut de la page
 */
header{
	min-height: 80px;
	min-width : 700px;
	margin:0px;
	padding: 0px;
	background-image: linear-gradient( #515151 0%, #000000 50%);
	padding-left:10px;
	padding-right:10px;
}
header div {
	width: 33%;
	min-width : 200px;
	margin:0px;
	padding: 0px;
	height: 80px;
	float:left;
}
header img {

	max-height: 80px;
}
header p {
	position: relative; 
	top: 10px;
	text-align: center;
	vertical-align: center;
	color: white;
	font-size:larger;
}
#haut_page_droite p{
	position: relative; 
	top: 8px;
	text-align: right;
	padding-right: 10px;
}
header a{
	text-decoration:none;
	font-size:larger;
	color :white;
	display:block;
}
header a:hover{
	color:#5F8CA3;
}

/* 
 * milieu de page
 */
#contenu{
	margin-top:10px;
	padding: 0px;
	min-height: 100%;
}

#contenu_partitions{
	background-color: white;
	margin:1%;
	/*margin:7px;*/
	max-width:68%;
	min-width : 68%;
	height:78%;
	min-height:78%;
	border-radius : 10px;
	box-shadow: 5px 5px 5px #000,inset 10px 20px 30px #FFF;
	float:left;
	border: 5px solid #333333; 
}
#detail{
	background-color: white;
	width: 25%;
	min-width : 180px;
	min-height:30%;
	margin:1%;
	/*margin:7px;*/
	border-radius : 10px;
	box-shadow: 5px 5px 5px #000,inset 10px 20px 30px #FFF;
	float:right;
	border: 5px solid #333333;
	visibility: hidden;
}
#contenu h3{
	border-bottom: 5px solid #333333; 
	text-align: center;
	vertical-align: center;
}
#contenu h2{
	border-bottom: 5px solid #333333; 
	text-align: center;
	vertical-align: center;
}
/* 
 * partitions
 */
#partitions{
	 margin-left: auto;
	 margin-right: auto;
	 vertical-align: middle; 
	 width:100%;
}
.partition {
	background-image: linear-gradient( #515151 0%, #000000 50%);
	margin:10px;
	margin-left: 20px;
	margin-right: 20px;
	float:left;
	text-align: center;
	border-radius : 10px;
	box-shadow: 5px 5px 5px #000;
}
.partition:hover{
	background-image: linear-gradient( #A2B5BF 0%, #5F8CA3 50%);
	color:black;
	cursor:pointer;
}
.partition:active{
	background-image: linear-gradient( #A2B5BF 0%, #5F8CA3 50%);
	color:black;
	border: 5px double white; 
	margin:5px;
	margin-left: 15px;
	margin-right: 15px;
}
.partition p{
	color :white;
	margin-left: 10px;
	margin-right: 10px;
}
.chanson{
	font-size:larger;
}
.instrument, .groupe{
	font-size:small ;
}
/* 
 * Détail
 */
#info_detail div{
	margin:5px;
	padding: 0px;
}
#info_detail div p{
	display:inline-block;
	margin:0px;
	padding: 0px;
}
#bouton_jouer{
	display:block;
	text-align:center;
	vertical-align:middle;
}
.bouton{
	display:block;
	width:150px;
	line-height:50px;
	text-align:center;
	vertical-align:middle;
	background-image: linear-gradient( #515151 0%, #000000 50%);
	color:white;
	text-decoration:none;
	border-radius : 10px;
	border: 5px double white; 
	box-shadow: 5px 5px 5px #000;
	font-weight: bold;
}
.bouton:hover {
	background-image: linear-gradient( #A2B5BF 0%, #5F8CA3 50%);
	color:black;
}
.champs{
	display:inline-block;
	font-weight: bold;
	margin:0px;
	padding: 0px;
}

/*
 * dialog
 */
.ui-dialog-titlebar { 
	color:white;
	background-image: linear-gradient( #515151 0%, #000000 50%);
}
.ui-dialog-titlebar-close{
	background-color: white;
}
.ui-dialog .ui-dialog-buttonpane { 
		display:block;
	text-align:center;
	vertical-align:middle;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
	float: none; 
}
.ui-dialog .ui-dialog-buttonpane button { 
	color:white; 
	cursor: pointer; 
	background-image: linear-gradient( #515151 0%, #000000 50%);
}
#dialogInstrument{
	min-width:600px;
		display:none;
}
#listeInstrument{
	 margin-left: auto;
	 margin-right: auto;
	 vertical-align: middle; 
}
.musicien{
	min-height:50px;
	min-width:100px;
	background-image: linear-gradient( #515151 0%, #000000 50%);
	margin:10px;
	margin-left: 20px;
	margin-right: 20px;
	float:left;
	text-align: center;
	border-radius : 10px;
	box-shadow: 5px 5px 5px #000;
}
.musicien:hover{
	background-image: linear-gradient( #A2B5BF 0%, #5F8CA3 50%);
	color:black;
	cursor:pointer;
}
.musicien:active{
	background-image: linear-gradient( #A2B5BF 0%, #5F8CA3 50%);
	color:black;
	border: 5px double white; 
	margin:5px;
	margin-left: 15px;
	margin-right: 15px;
}
.musicien p{
	color :white;
	margin-left: 10px;
	margin-right: 10px;
}
#haut_page_droite{
	width: 30%;
}

#haut_page_droite_help{
	width: 3%;
	min-width:20px;
	vertical-align:middle;
}
#haut_page_droite_help img{
	margin:66%;
}
